<script type="text/javascript">
	$(document).ready(function() {

/* ======================================================================
	기본 설정
====================================================================== */

		//접속한 브라우저가 모바일용인지 데스크탑용인지 구별
		function isMobile() {
			var filter = "win16|win32|win64|mac|macintel";
			if( navigator.platform  ){
				if( filter.indexOf(navigator.platform.toLowerCase())<0 ){
					return true;
				}else{
					return false;
				}
			}
		}


/* ======================================================================
	투명도 조절 스크립트 (슬라이드 바)
====================================================================== */

		$('#slider2').slider({ 
			min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
			slide: function(e,ui){
				$('#bg_texture').css('opacity', ui.value)
			}                
		});
		$('#slider3').slider({ 
			min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
			slide: function(e,ui){
				$('#bgpic_img1').css('opacity', ui.value)
			}                
		});
		$('#slider5').slider({ 
			min: 0, max: 1, step: 0.01, value: 0.1, orientation: "horizontal",
			slide: function(e,ui){
				$('#bg_envelop').css('opacity', ui.value)
			}                
		});
		$('#slider6').slider({ 
			min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
			slide: function(e,ui){
				$('#bg_effect').css('opacity', ui.value)
			}                
		});


/* ======================================================================
	배경 레이어 z-index 변경
	배경 레이어 4, 5 ,6층으로 인해 그 아래에 있는 3층(메인사진)이 클릭되지 않는 것을 방지함.
	4, 5 ,6층에 마우스를 올리는 순간 3층의 z-index를 최상위로 바꿈.
====================================================================== */

		$('.bg_pic_wrapper, .bg_pic, .bg_color, .bg_envelop, .bg_effect').mouseover(function(){
			$('.bg_pic_layer').css({'z-index':'9'});
		});
		$('.bg_pic_wrapper, .bg_pic, .bg_color, .bg_envelop, .bg_effect').mouseout(function(){
			$('.bg_pic_layer').css({'z-index':'3'});
		});


/* ======================================================================
	이미지를 드래그할 때 동작
	Main Wrapper의 overflow:hidden 해제 및 이미지 반투명, 마우스를 떼면 다시 복귀
====================================================================== */

		//모바일과 데스크탑 구분
		$(function() {
			if(isMobile()) { //모바일일 때
				$('.bg_pic_wrapper').click(function(){
					$('.bg_pic_wrapper').addClass('sbox_bg_pic');
					$('.bg_pic').css({'overflow':'visible'});
					$('.ui-resizable-handle, .bg_pic_option').css({'visibility':'visible'});
				});
				$('.btn_bgpic_hide').click(function(){
					$('.bg_pic_wrapper').removeClass('sbox_bg_pic');
					$('.bg_pic').css({'overflow':'hidden'});
					$('.ui-resizable-handle, .bg_pic_option').css({'visibility':'hidden'});
				});
			} else { //데스크탑일 때
				$('.bg_pic_wrapper').mouseover(function(){
					$('.bg_pic_wrapper').addClass('sbox_bg_pic');
					$('.bg_pic').css({'overflow':'visible'});
					$('.ui-resizable-handle, .bg_pic_option').css({'visibility':'visible'});
				});
				$('.bg_pic_wrapper').mouseout(function(){
					$('.bg_pic_wrapper').removeClass('sbox_bg_pic');
					$('.bg_pic').css({'overflow':'hidden'});
					$('.ui-resizable-handle, .bg_pic_option').css({'visibility':'hidden'});
				});
			}
		});

		$('.bg_pic_wrapper, .ui-resizable-handle').mousedown(function(){
			$('.bgpic_img').css({'opacity':'0.5'});
			$('.bg_pic').css({'overflow':'visible'});
		});
		$('.bg_pic_wrapper, .ui-resizable-handle').mouseup(function(){
			$('.bgpic_img').css({'opacity':'1'});
		});



/* ======================================================================
	Toggle - 박스 펼치기, 접기 버튼
====================================================================== */

		$('#toggle11_down').click(function(){
			$('#toggle11_down').toggle();
			$('#toggle11_up').toggle();
			$('#photo_box11').animate({'height':'186px'},500);
		});
		$('#toggle11_up').click(function(){
			$('#toggle11_up').toggle();
			$('#toggle11_down').toggle();
			$('#photo_box11').animate({'height':'60px'},500);
		});
		$('#toggle12_down').click(function(){
			$('#toggle12_down').toggle();
			$('#toggle12_up').toggle();
			$('#photo_box12').animate({'height':'186px'},500);
		});
		$('#toggle12_up').click(function(){
			$('#toggle12_up').toggle();
			$('#toggle12_down').toggle();
			$('#photo_box12').animate({'height':'60px'},500);
		});
		$('#toggle21_down').click(function(){
			$('#toggle21_down').toggle();
			$('#toggle21_up').toggle();
			$('#photo_box21').animate({'height':'186px'},500);
		});
		$('#toggle21_up').click(function(){
			$('#toggle21_up').toggle();
			$('#toggle21_down').toggle();
			$('#photo_box21').animate({'height':'60px'},500);
		});
		$('#toggle31_down').click(function(){
			$('#toggle31_down').toggle();
			$('#toggle31_up').toggle();
			$('#photo_box31').animate({'height':'186px'},500);
		});
		$('#toggle31_up').click(function(){
			$('#toggle31_up').toggle();
			$('#toggle31_down').toggle();
			$('#photo_box31').animate({'height':'60px'},500);
		});
		$('#toggle32_down').click(function(){
			$('#toggle32_down').toggle();
			$('#toggle32_up').toggle();
			$('#photo_box32').animate({'height':'186px'},500);
		});
		$('#toggle32_up').click(function(){
			$('#toggle32_up').toggle();
			$('#toggle32_down').toggle();
			$('#photo_box32').animate({'height':'60px'},500);
		});
		$('#toggle51_down').click(function(){
			$('#toggle51_down').toggle();
			$('#toggle51_up').toggle();
			$('#photo_box51').animate({'height':'186px'},500);
		});
		$('#toggle51_up').click(function(){
			$('#toggle51_up').toggle();
			$('#toggle51_down').toggle();
			$('#photo_box51').animate({'height':'60px'},500);
		});
		$('#toggle61_down').click(function(){
			$('#toggle61_down').toggle();
			$('#toggle61_up').toggle();
			$('#photo_box61').animate({'height':'186px'},500);
		});
		$('#toggle61_up').click(function(){
			$('#toggle61_up').toggle();
			$('#toggle61_down').toggle();
			$('#photo_box61').animate({'height':'60px'},500);
		});


/* ======================================================================
	Button - 네비게이션 & 저장 버튼
====================================================================== */

		$('#btn_item1').click(function(){ //1층 - 반복패턴
			$('.btn_item1').removeClass('btn_item_gray').addClass('btn_item_color');
			$('.btn_item2, .btn_item3, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_pattern').css({'right':'0'});
			$('.panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'right':'120%'});
		});
		$('#btn_item2').click(function(){ //2층 - 고정패턴
			$('.btn_item2').removeClass('btn_item_gray').addClass('btn_item_color');
			$('.btn_item1, .btn_item3, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_texture').css({'right':'0'});
			$('.panel_bg_pattern, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'right':'120%'});
		});
		$('#btn_item3').click(function(){ //3층 - 메인사진
			$('.btn_item3').removeClass('btn_item_gray').addClass('btn_item_color');
			$('.bg_pic_wrapper').css({'display':'block'}); //클릭하는 순간 메인사진 틀 보이기
			$('.btn_item1, .btn_item2, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_pic').css({'right':'0'});
			$('.panel_bg_pattern, .panel_bg_texture, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'right':'120%'});
		});
		$('#btn_item4').click(function(){ //4층 - 컬러
			$('.btn_item4').removeClass('btn_item_gray').addClass('btn_item_color');
			//$('.bg_color').addClass('bg_color_default'); //클릭하는 순간 기본 컬러값 부여(background.css에 정의되어 있음.)
			$('.btn_item1, .btn_item2, .btn_item3, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_color').css({'right':'0'});
			$('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_envelop, .panel_bg_effect').css({'right':'120%'});
		});
		$('#btn_item5').click(function(){ //5층 - 무늬
			$('.btn_item5').removeClass('btn_item_gray').addClass('btn_item_color');
			$('.btn_item1, .btn_item2, .btn_item3, .btn_item4, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_envelop').css({'right':'0'});
			$('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_effect').css({'right':'120%'});
		});
		$('#btn_item6').click(function(){ //6층 - 특수효과
			$('.btn_item6').removeClass('btn_item_gray').addClass('btn_item_color');
			$('.btn_item1, .btn_item2, .btn_item3, .btn_item4, .btn_item5').removeClass('btn_item_color').addClass('btn_item_gray');
			$('.panel_bg_effect').css({'right':'0'});
			$('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop').css({'right':'120%'});
		});
		$('#all_reset').click(function(){ //모두 초기화
			$('#bg_pattern').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/blank.gif)'});
			$('#btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item1.png)'});
			$('#bg_texture').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/blank.gif)'});
			$('#btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item2.png)'});
			$('.bg_pic_wrapper').css({'display':'none)'});
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/images/blank.gif'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item3.png)'});
			$('#bg_color, #btn_item4').css({'background-color':''});
			$('#btn_item4').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item4.png))'});
			$('#bg_envelop').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/blank.gif)'});
			$('#btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item5.png))'});
			$('#bg_effect_frame1').attr({'src':'<?php echo $board_skin_url; ?>/extend/blank.html'});
			$('#btn_item6').css({'background-image':'url(<?php echo $board_skin_url; ?>/images/icon_item6.png))'});
		});

		$('#bg_save_box').click(function(){ //저장 버튼
			var result = confirm('Are you sure want to save?'); //일단 저장 여부를 물어본 다음에
			if(result) { //'예'를 클릭하면
				$('.bg_setting_wrapper').animate({'right':'-120%'},300); //'배경 설정 패널'을 감추고
				window.parent.$('#con_wrapper, #setting_open').css({'display':'block'}); //메인 페이지(부모)의 내용창을 보이게 한 뒤 '목차 패널' 토글버튼을 출력하고
				window.parent.$('#setting_bgonly_close, #content_show, #bgbtn_bgpo_on, #bgbtn_bgpo_off').css({'display':'none'}); //감출 것들을 모두 감춘다.
			} else {
				//no
			}
		});


/* ======================================================================
	On, Off 스위치 - 네비게이션
====================================================================== */

		$('#hide_item1').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_pattern").css({'left':'0'});
				$('#icon_item_off1').toggle();
			} else {
				$('#bg_pattern').css({'left':'-120%'});
				$('#icon_item_off1').toggle();
			}
		});

		$('#hide_item2').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_texture").css({'left':'0'});
				$('#icon_item_off2').toggle();
			} else {
				$('#bg_texture').css({'left':'-120%'});
				$('#icon_item_off2').toggle();
			}
		});

		$('#hide_item3').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_pic").css({'left':'0'});
				$('#icon_item_off3').toggle();
			} else {
				$('#bg_pic').css({'left':'-120%'});
				$('#icon_item_off3').toggle();
			}
		});

		$('#hide_item4').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_color").css({'left':'0'});
				$('#icon_item_off4').toggle();
			} else {
				$('#bg_color').css({'left':'-120%'});
				$('#icon_item_off4').toggle();
			}
		});

		$('#hide_item5').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_envelop").css({'left':'0'});
				$('#icon_item_off5').toggle();
			} else {
				$('#bg_envelop').css({'left':'-120%'});
				$('#icon_item_off5').toggle();;
			}
		});

		$('#hide_item6').click(function() {
			var $this = $(this);  
			if ($this.is(':checked')) {
				$("#bg_effect").css({'left':'0'});
				$("#bg_effect_frame1").css({'left':'0'});			
				$('#icon_item_off6').toggle();
			} else {
				$('#bg_effect').css({'left':'-120%'});
				$("#bg_effect_frame1").css({'left':'-120%'});
				$('#icon_item_off6').toggle();
			}
		});


/* ======================================================================
	Add Item - 썸네일 클릭시 내용 삽입하기
	샘플일 뿐 실제 DB 연동으로 동작하는 방식이 아니므로 추후에 변경해야 함.
====================================================================== */

		//썸네일 클릭시 1층 - 반복패턴 삽입하기
		$('.thumb_p1').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p1.gif)'});
		});
		$('.thumb_p2').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p2.gif)'});
		});
		$('.thumb_p3').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p3.gif)'});
		});
		$('.thumb_p4').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p4.gif)'});
		});
		$('.thumb_p5').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p5.gif)'});
		});
		$('.thumb_p6').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p6.gif)'});
		});
		$('.thumb_p7').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p7.gif)'});
		});
		$('.thumb_p8').click(function(){
			$('#bg_pattern, #btn_item1').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_p8.gif)'});
		});


		/* 
		Body Background - 아이프레임 내부에서 부모 페이지의 배경 변경.
		CSS 변경을 json 방식으로 해왔으나 이 경우에는 작동되지 않아서 일반 형식으로 바꿈.
		◎ json 형식 - ({'aaa':'bbb'}) /  ◎ 일반 형식 - ('aaa','bbb')
		*/
		$('.thumb_pb1').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb1.gif)');
		});
		$('.thumb_pb2').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb2.gif)');
		});
		$('.thumb_pb3').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb3.gif)');
		});
		$('.thumb_pb4').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb4.gif)');
		});
		$('.thumb_pb5').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb5.gif)');
		});
		$('.thumb_pb6').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb6.gif)');
		});
		$('.thumb_pb7').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb7.gif)');
		});
		$('.thumb_pb8').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb8.gif)');
		});
		$('.thumb_pb9').click(function(){
			window.parent.$('#bg_main').css('background-image', 'url(<?php echo $board_skin_url; ?>/background/bg_pattern/pattern_pb9.gif)');
		});

		//썸네일 클릭시 2층 - 고정패턴 삽입하기
		$('.thumb_t1').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t1.jpg)'});
		});
		$('.thumb_t2').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t2.jpg)'});
		});
		$('.thumb_t3').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t3.jpg)'});
		});
		$('.thumb_t4').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t4.jpg)'});
		});
		$('.thumb_t5').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t5.jpg)'});
		});
		$('.thumb_t6').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t6.jpg)'});
		});
		$('.thumb_t7').click(function(){
			$('#bg_texture, #btn_item2').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_texture/texture_t7.jpg)'});
		});

		//썸네일 클릭시 3층 - 메인사진 삽입하기
		$('.thumb_a1').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a1.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a1.jpg)'});
		});
		$('.thumb_a2').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a2.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a2.jpg)'});
		});
		$('.thumb_a3').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a3.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a3.jpg)'});
		});
		$('.thumb_a4').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a4.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a4.jpg)'});
		});
		$('.thumb_a5').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a5.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a5.jpg)'});
		});
		$('.thumb_a6').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a6.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a6.jpg)'});
		});
		$('.thumb_a7').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a7.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a7.jpg)'});
		});
		$('.thumb_a8').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a8.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a8.jpg)'});
		});
		$('.thumb_a9').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a9.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a9.jpg)'});
		});
		$('.thumb_a10').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a10.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a10.jpg)'});
		});
		$('.thumb_a11').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a11.png'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/preset/pic_a11.png)'});
		});

		$('.thumb_b1').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b1.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b1.jpg)'});
		});
		$('.thumb_b2').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b2.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b2.jpg)'});
		});
		$('.thumb_b3').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b3.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b3.jpg)'});
		});
		$('.thumb_b4').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b4.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b4.jpg)'});
		});
		$('.thumb_b5').click(function(){
			$('#bgpic_img1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b5.jpg'});
			$('#btn_item3').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_pic/user_upload/pic_b5.jpg)'});
		});

		//썸네일 클릭시 5층 - 무늬 삽입하기
		$('.thumb_e1').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b1.png)'});
		});
		$('.thumb_e2').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b2.png)'});
		});
		$('.thumb_e3').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b3.png)'});
		});
		$('.thumb_e4').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b4.png)'});
		});
		$('.thumb_e5').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b5.png)'});
		});
		$('.thumb_e6').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_b6.png)'});
		});
		$('.thumb_e7').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w1.png)'});
		});
		$('.thumb_e8').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w2.png)'});
		});
		$('.thumb_e9').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w3.png)'});
		});
		$('.thumb_e10').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w4.png)'});
		});
		$('.thumb_e11').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w5.png)'});
		});
		$('.thumb_e12').click(function(){
			$('#bg_envelop, #btn_item5').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_envelop/envelop_w6.png)'});
		});

		//썸네일 클릭시 6층 - 특수효과 삽입하기
		$('.thumb_f1').click(function(){
			$('#bg_effect_frame1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_effect/snow/index.html'});
			$('#btn_item6').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_effect/thumb_f1.jpg)'});
		});
		$('.thumb_f2').click(function(){
			$('#bg_effect_frame1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_effect/firefly/index.html'});
			$('#btn_item6').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_effect/thumb_f2.jpg)'});
		});
		$('.thumb_f3').click(function(){
			$('#bg_effect_frame1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_effect/particle1/index.html'});
			$('#btn_item6').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_effect/thumb_f3.jpg)'});
		});
		$('.thumb_f4').click(function(){
			$('#bg_effect_frame1').attr({'src':'<?php echo $board_skin_url; ?>/background/bg_effect/galaxy/index.html'});
			$('#btn_item6').css({'background-image':'url(<?php echo $board_skin_url; ?>/background/bg_effect/thumb_f4.jpg)'});
		});


/* ======================================================================
	그래디언트 마스크 옵션 (addClass와 removeClass - 여러 개 쓸 때는 쉼표 없이 칸만 띄움.)
====================================================================== */

		$('.bgpic_mo1').click(function(){ //남기는 부분(좌, 상)
			$('#bgpic_img1').removeClass('mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_lt');
		});
		$('.bgpic_mo2').click(function(){ //남기는 부분(우, 상)
			$('#bgpic_img1').removeClass('mask_lt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_rt');
		});
		$('.bgpic_mo3').click(function(){ //남기는 부분(좌, 하)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_lb');
		});
		$('.bgpic_mo4').click(function(){ //남기는 부분(우, 하)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_rb');
		});
		$('.bgpic_mo5').click(function(){ //남기는 부분(가운데)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_cc');
		});
		$('.bgpic_mo6').click(function(){ //남기는 부분(좌)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_rr mask_tt mask_bb mask_00').addClass('mask_ll');
		});
		$('.bgpic_mo7').click(function(){ //남기는 부분(우)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_tt mask_bb mask_00').addClass('mask_rr');
		});
		$('.bgpic_mo8').click(function(){ //남기는 부분(상)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_bb mask_00').addClass('mask_tt');
		});
		$('.bgpic_mo9').click(function(){ //남기는 부분(하)
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_00').addClass('mask_bb');
		});
		$('.bgpic_mo10').click(function(){ //초기화
			$('#bgpic_img1').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_00');
		});
	});
</script>